<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="Docutils 0.5: http://docutils.sourceforge.net/" />
<title>Scenes</title>
<link rel="stylesheet" href="doc.css" type="text/css" />
</head>
<body>
<div class="document">
<div class="navigation navigation-header container">
<span class="previous">Previous: <a class="reference" href="basic_concepts.html" title="Basic Concepts">Basic Concepts</a></span><span class="next">Next: <a class="reference" href="director.html" title="Director">Director</a></span><span class="breadcrumbs"><a class="reference" href="index.html" title="Programming Guide">Programming Guide</a> » <a class="reference" href="basic_concepts.html" title="Basic Concepts">Basic Concepts</a> » Scenes</span></div>
<h1 class="title">Scenes</h1>

<p>A scene (implemented with the <a class="reference apilink" href="../api/cocos.scene.Scene-class.html " title="cocos.scene.Scene">Scene</a> object) is a more or less
independent piece of the app workflow.
Some people may call them &quot;screens&quot; or &quot;stages&quot;. Your app can have
many scenes, but only one of them is active at a given time.</p>
<p>For example, you could have a game with the following scenes:
Intro, Menu, Level 1, Cutscene 1, Level 2, Winning cutscene,
losing cutscene, High scores screen.</p>
<p>You can define every one of these scenes more or less as separate apps;
there is a bit of glue between them containing the logic for connecting
scenes (the intro goes to the menu when interrupted or finishing,
Level 1 can lead you to the cutscene 1 if finished or to the losing
cutscene if you lose, etc.).</p>
<div class="figure">
<img alt="scenes.png" src="scenes.png" />
</div>
<p>A scene is described in cocos2d as a tree of CocosNodes where the root is
a <cite>Scene</cite> node, the most near descendants usually are <a class="reference sectionlink" href="layers.html">Layers</a>, and they
hold and organize individual elements.</p>
<p>Example for the main menu screen:</p>
<pre class="py-doctest">
main_menu_scene : Scene node holding all the main menu elements
        animated_background : Layer depicting an animated background
                static_background : Sprite with a nice draw covering all the screen
                far_trees : Layer holding the most distant trees
                        tree_1..tree_k : Sprites showing trees
                birds : Layer holding flying birds
                        bird_1..bird_n : Sprites showing birds
                near_trees : Layer holding the most near trees
                        tree_1..tree_m : Sprites showing trees
        main_menu : Menu, a Layer subclass provided by cocos that handles all the behavior
                                related to menu (key listening, highlight, select...)
                item1 : MenuItem , <span class="py-string">'play'</span>
                item2 : MenuItem , <span class="py-string">'options'</span>
                item3 : MenuItem , <span class="py-string">'quit'</span></pre>
<p>There is also a family of <cite>Scene</cite> subclasses called transitions (implemented with
the <cite>TrasitionScene</cite> object) which allow you to
make transitions between two scenes (fade out/in, slide from a side, etc).</p>
<p>Since scenes are subclass of <a class="reference apilink" href="../api/cocos.cocosnode.CocosNode-class.html " title="cocos.cocosnode.CocosNode">CocosNode</a>, they can be transformed manually or
by using actions.
See <a class="reference" href="actions_transformations_and_effects.html">Actions, Transformations and Effects</a> for more detail about actions.</p>
<div class="navigation navigation-footer container">
<span class="previous">Previous: <a class="reference" href="basic_concepts.html" title="Basic Concepts">Basic Concepts</a></span><span class="next">Next: <a class="reference" href="director.html" title="Director">Director</a></span><span class="breadcrumbs"><a class="reference" href="index.html" title="Programming Guide">Programming Guide</a> » <a class="reference" href="basic_concepts.html" title="Basic Concepts">Basic Concepts</a> » Scenes</span></div>
</div>
</body>
</html>
